<template>
  <div class="about">
    <h1>This is an new page</h1>
    <div id="abc">
      <div id="aaa">
        <LineBar :chart-data="chartdata" />
      </div>
      <div id="ccc">
        <CirclePie />
      </div>
      <div id="ddd">
        <LineBar :chart-data="chartdata1" />
      </div>
      <p>3</p>
      <div class="eee">
        <WaterDrop :chart-data="chartdataWater" />
      </div>
    </div>
  </div>
</template>
<script>
import LineBar from "@/components/engyCharts/linebar.vue";
import CirclePie from "@/components/engyCharts/circlePie.vue";
import WaterDrop from "@/components/engyCharts/waterDrop.vue";
export default {
  name: "AboutView",
  components: {
    LineBar,
    CirclePie,
    WaterDrop,
  },
  data() {
    return {
      chartdata: {},
      chartdata1: {},
      chartdataWater: null,
    };
  },
  methods: {},
  mounted() {
    setTimeout(() => {
      this.chartdata = {
        xLabel: ["2023-1", "2023-5", "2023-8", "2023-12", "2024-2", "2024-4"],
        series: [
          {
            tooltipLabel: "金额（万元）", // 显示在tooltip中的文字
            data: [30, 20, 16, 20, 40, 28],
            color: "#1fdcf7",
            type: "bar",
            otherOption: {
              stack: "fruit",
            },
          },
          {
            tooltipLabel: "占比（%）", // 显示在tooltip中的文字
            data: [25, 23, 4, 14, 50, 27],
            color: "#6CBFC8",
            type: "line",
            otherOption: {
              smooth: true,
              areaStyle: {
                //新版渐变色实现
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#1fdcf75f",
                    },
                    {
                      offset: 1,
                      color: "#1fdcf70f",
                    },
                  ],
                },
              },
              symbol: "none",
            },
          },
          {
            tooltipLabel: "CO2/吨", // 显示在tooltip中的文字
            data: [251, 232, 4, 143, 500, 27],
            color: "#60B0Cf",
            type: "bar",
            otherOption: {
              barGap: "-100%",
              yAxisIndex: 0,
              stack: "fruit",
            },
          },
          {
            tooltipLabel: "电力/kWh", // 显示在tooltip中的文字
            data: [99, 32, 4, 17, 50, 27],
            color: "#ff0",
            type: "bar",
            otherOption: {
              yAxisIndex: 0,
              barGap: "100%",
            },
          },
        ],
        yData: [
          {
            axisLabel: "单位：万元", // 显示在坐标轴上的
            showAxis: true,
          },
          {
            axisLabel: "占比：%", // 显示在坐标轴上的
            showAxis: true,
          },
          {
            showAxis: true,
          },
          {
            showAxis: true,
          },
        ],
      };
      this.chartdata1 = {
        xLabel: ["2023-1", "2023-5", "2023-8", "2023-12", "2024-2", "2024-4"],
        series: [
          {
            tooltipLabel: "金额（万元）", // 显示在tooltip中的文字
            data: [30, 20, 16, 20, 40, 28],
            color: "#1fdcf7",
            type: "bar",
          },
          {
            tooltipLabel: "第一占比（%）", // 显示在tooltip中的文字
            data: [25, 23, 4, 14, 50, 27],
            color: "#6CBFC8",
            type: "line",
            // 其他配置信息
            otherOption: {
              smooth: true,
              areaStyle: {
                //新版渐变色实现
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#1fdcf75f",
                    },
                    {
                      offset: 1,
                      color: "#1fdcf70f",
                    },
                  ],
                },
              },
              symbol: "none",
              yAxisIndex: 1,
            },
          },
          {
            tooltipLabel: "第二占比（%）", // 显示在tooltip中的文字
            data: [19, 20, 30, 1, 0, 2],
            color: "#309ff1",
            type: "line",
            otherOption: {
              smooth: true,
              symbol: "none",
              yAxisIndex: 1,
            },
          },
        ],
        yData: [
          {
            axisLabel: "单位：万元", // 显示在坐标轴上的
            showAxis: true,
          },
          {
            axisLabel: "占比：%", // 显示在坐标轴上的
            showAxis: true,
          },
          {
            showAxis: false,
          },
        ],
      };
      this.chartdataWater = "36";
    }, 1000);
  },
};
</script>
<style lang="scss" scoped>
#abc {
  width: 1300px;
  min-height: 850px;
  display: flex;
  flex-flow: column;
  margin-bottom: 100px;
}
#aaa {
  width: 400px;
  height: 300px;
}
#bbb {
  width: 400px;
  height: 300px;
}
#ccc {
  width: 400px;
  height: 300px;
}
#ddd {
  width: 400px;
  height: 300px;
}
.eee {
  width: 400px;
  height: 300px;
  border: 1px solid;
}
.fff {
  width: 1200px;
  height: 400px;
}
.ggg {
  width: 1200px;
  height: 800px;
  border: 1px solid;
}
</style>
